<template>
  <div class="app-container">
    <div style="width: 100%;margin-bottom:10px;justify-content: flex-end" class="flex-row">
      <el-button type="primary" @click="addModule">新增模块</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        :index="indexMethod"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column prop="tableNameStr" label="模块名称" align="center"></el-table-column>
      <el-table-column prop="tableName" label="模块标识" align="center"></el-table-column>
      <el-table-column prop="tableDescribe" label="模块描述" align="center"></el-table-column>
      <el-table-column prop="handle" label="操作设置" align="center" width="200">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            width="100"
            trigger="manual"
            v-model="scope.row.visible">
            <el-button slot="reference" @click="scope.row.visible = !scope.row.visible" type="primary">选项配置</el-button>
           <div style="width: 100%;justify-content: center;align-items: center" class="flex-row-column btn-rowUp">
             <div>
               <el-button size="small" type="primary" ghost plain @click="showSchemaModal(scope.row)">表单设计</el-button>
             </div>
             <div>
               <el-button size="small" type="primary" ghost plain @click="showTableModal(scope.row)">联表设计</el-button>
             </div>
             <div>
               <el-button size="small" type="primary" ghost plain @click="showDrawerModal(scope.row)">列表设计</el-button>
             </div>
<!--             <div>-->
<!--               <el-button size="small" type="primary" ghost plain @click="showBusinessModal(scope.row)">业务编排</el-button>-->
<!--             </div>-->
           </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;margin-top:10px;justify-content: flex-end" class="flex-row">
      <el-pagination
        background
        layout="sizes,prev,pager,next,jumper,total"
        :page-size="pagin.pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :total="pagin.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>


    <el-dialog-comp width="30%" title="模块管理" :hasFooter="true" ref="refDialog"
    @throwDialogEmit="saveSubmit">
      <el-form :model="formType" :rules="formRules" label-position="right" label-width="80px" ref="refForm">
       <el-form-item label="模块名称" prop="tableNameStr" style="width: 100%">
         <el-select v-model="formType.tableNameStr" placeholder="请选择模块名称" filterable clearable
         style="width: 100%" @change="getChangeVal">
           <el-option v-for="item in menuListData" :key="item.menuName" :label="item.menuName" :value="item.menuName"></el-option>
         </el-select>
       </el-form-item>
        <el-form-item label="模块标识" prop="tableName">
          <el-input placeholder="请输入模块标识" v-model="formType.tableName" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="模块描述" prop="tableDescribe">
          <el-input placeholder="请输入模块描述" v-model="formType.tableDescribe" clearable
          type="textarea" autosize :maxlength="255"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog-comp>

    <el-drawer-comp ref="refTableSetDrawer" size="90%" :hasFooter="true"
                    headTitle="列表设计" @throwSumitEmit="submitSave" :destroyOnClose="true">
      <SetTableColumn ref="refSetTableColumn" :tableName="tableName"
      :tableId="tableId"></SetTableColumn>
    </el-drawer-comp>


    <el-drawer-comp ref="refJointTableDrawer" size="90%" :hasFooter="true"
                    headTitle="联表设计" @throwSumitEmit="submitSave" :destroyOnClose="true">
      <JointTableSetting ref="refSetTableColumn" :tableName="tableName"
                      :tableId="tableId"></JointTableSetting>
    </el-drawer-comp>

    <el-drawer-comp ref="refBusinessOrchestration" size="90%" :hasFooter="true"
                    headTitle="业务编排" @throwSumitEmit="submitBusinessSave" :destroyOnClose="true">
      <BusinessOrchestration ref="refBusinessColumn" :tableName="tableName"
                         :tableId="tableId"></BusinessOrchestration>
    </el-drawer-comp>
    <ScrameForm ref="refScrameForm"></ScrameForm>
  </div>
</template>

<script>
import SetTableColumn from "@/views/systeamSet/moduleManage/components/SetTableColumn";
import ScrameForm from "@/views/systeamSet/moduleManage/components/ScrameForm";
import JointTableSetting from "@/views/systeamSet/moduleManage/components/JointTableSetting";
import BusinessOrchestration from '@/views/systeamSet/moduleManage/components/BusinessOrchestration'
import {addData, getList, addTable, editTable} from '@/api/public/index'
import {listMenu} from '@/api/system/menu'
let onlineTableId = ''
export default {
  name: "index",
  components: {
    SetTableColumn,
    ScrameForm,
    JointTableSetting,
    BusinessOrchestration
  },
  data() {
    var validateTableName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写模块标识'));
      }
      else{
        if(/^[A-Za-z][A-Za-z_]*$/.test(value)){
          return callback()
        }
        else{
          return callback(new Error('模块标识格式有误，只能包含英文字符和下划线且首字符必须是英文字符'));
        }
      }
    }
    var validateTableNameStr = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写模块名称'));
      }
      else{
        if(/[\u4E00-\u9FFF]+/.test(value)){
          return callback()
        }
        else{
          return callback()
          // return callback(new Error('模块名称格式有误，只能包含中文字符'));
        }
      }
    };
    return {
      reload: false,
      tableData: [],
      menuListData:[],
      schema: '',
      pagin:{
        currentPage:1,
        pageSize:10,
        total:0
      },
      formType:{
        tableName:'',//表名称(限制英文，常用下划线)
        tableNameStr:'',//名字
        tableDescribe:'',//表描述
      },
      formRules:{
        tableNameStr:[{validator: validateTableNameStr, trigger: 'change' }],
        // tableName:[{validator: validateTableName, trigger: 'blur' }],
        tableDescribe:[{required:true,message:'请填写模块描述',trigger:'blur'}]
      },
      tableName:'',
      tableId:'',
    }
  },
  created() {
    this.pagin.currentPage = 1
    this.getTableList()

    listMenu().then(res => {
      this.menuListData = res.data.filter(item => item.menuType == 'M' || item.menuType == 'C')
       // = res.data
    })
  },
  methods: {
    indexMethod(index){
      return (this.pagin.currentPage - 1) * this.pagin.pageSize + index + 1
    },
    showDrawerModal(row) {
      this.tableName = row.tableName
      this.tableId = row.id
      onlineTableId = row.id
      this.$refs.refTableSetDrawer.openDrawer()
    },
    showBusinessModal(row){
      this.tableName = row.tableName
      this.tableId = row.id
      onlineTableId = row.id
      this.$refs.refBusinessOrchestration.openDrawer()
    },
    submitSave() {
      const data = {
        onlineTableId,
        tableSettingJson:JSON.stringify(this.$refs.refSetTableColumn.throwData())
      }
      if(this.$refs.refSetTableColumn.throwData().setTableId){
        data.id = this.$refs.refSetTableColumn.throwData().setTableId
        editTable(data).then(res => {
          if(res.code == 200){
            this.$message.success('保存成功')
            this.$refs.refTableSetDrawer.closeDrawer()
          }
        })
      }
      else{
        addTable(data).then(res => {
          if(res.code == 200){
            this.$message.success('保存成功')
            this.$refs.refTableSetDrawer.closeDrawer()
          }
        })
      }

    },
    handleSizeChange(val){
      this.pagin.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val){
      this.pagin.currentPage = val
      this.getTableList()
    },
    addModule(){
      this.$refs.refDialog.throwOpenDialog()
      this.$nextTick(()=>{
        this.$refs.refForm.resetFields()
        this.$forceUpdate()
      })
    },
    saveSubmit(){
      this.$refs.refForm.validate(bol => {
        if(bol){
          if(this.formType.id){

          }
          else{
            addData(this.formType).then(res => {
              if(res.code == 200){
                this.$message.success('添加成功')
                this.pagin.currentPage = 1
                this.getTableList()
                this.$refs.refDialog.closeDialog()
              }
            })
          }
        }
      })
    },

    getTableList(){
      const params = {
        current:this.pagin.currentPage,
        size:this.pagin.pageSize
      }
      getList(params).then(res => {
        if(res.code == 200){
          res.data.records.forEach(item => {
            item.visible = false
          })
          this.tableData = res.data.records
          this.pagin.total = res.data.total * 1
        }
        else{
          this.tableData = []
          this.pagin.total = 0
        }
      })
    },
    getChangeVal(value){
      const obj = this.menuListData.find(item => item.menuName == value)
      if(obj){
        this.formType.tableName = obj.path
      }
    },
    showSchemaModal(row){
      this.$refs.refScrameForm.openFormDrawer(row)
    },
    showTableModal(row){
      this.tableName = row.tableName
      this.tableId = row.id
      this.$refs.refJointTableDrawer.openDrawer()
    },
    submitBusinessSave(){
      const jsonData = this.$refs.refBusinessColumn.exportToJson()
      console.log(jsonData,'jsonData')
    }
  }
}
</script>

<style scoped lang="scss">
.btn-rowUp{
  &>div:not(:last-child){
    margin-bottom: 10px;
  }
}
</style>
